メインコンテンツまでスキップ

Markdown 記法サンプル

ドキュザウルスでよく使用されるMarkdown記法を自分用にまとめています。

見出し (Heading)​

# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6
見出し1
======

見出し2
------

表示結果:

見出し1

見出し2​

強調 (Emphasis)​

*イタリック* または _イタリック_
**ボールド** または __ボールド__
***イタリック＆ボールド*** または ___イタリック＆ボールド___

表示結果:

イタリック または イタリック
ボールド または ボールド
イタリック＆ボールド または イタリック＆ボールド

リスト (List)​

箇条書きリスト​

- 箇条書きアイテム1
- 箇条書きアイテム2
  - ネストされた箇条書き1
  - ネストされた箇条書き2
- 箇条書きアイテム3

* 星印でも箇条書き
* こちらも箇条書き
  * ネストされた箇条書き

表示結果:

  • 箇条書きアイテム1
  • 箇条書きアイテム2
    • ネストされた箇条書き1
    • ネストされた箇条書き2
  • 箇条書きアイテム3
  • 星印でも箇条書き
  • こちらも箇条書き
    • ネストされた箇条書き

番号付きリスト​

1. 番号付きリスト1
2. 番号付きリスト2
   1. ネストされた番号付きリスト1
   2. ネストされた番号付きリスト2
3. 番号付きリスト3

表示結果:

  1. 番号付きリスト1
  2. 番号付きリスト2
    1. ネストされた番号付きリスト1
    2. ネストされた番号付きリスト2
  3. 番号付きリスト3

基本的なリンク​

[GitHub](https://github.com)

表示結果:

GitHub

タイトル付きリンク​

[GitHub](https://github.com "GitHubのウェブサイト")

表示結果:

GitHub

参照リンク​

[GitHub][1]
[Docusaurus][2]

[1]: https://github.com
[2]: https://docusaurus.io

表示結果:

GitHub Docusaurus

自動リンク​

https://github.com
example@example.com

表示結果:
https://github.com
example@example.com

画像 (Image)​

基本的な画像​

![代替テキスト](https://momijiina.com/authors/momijiina.png)

表示結果:

代替テキスト

タイトル付き画像​

![代替テキスト](https://momijiina.com/authors/momijiina.png "代替テキストの例")

表示結果:

代替テキスト

リンク付き画像​

[![代替テキスト](https://momijiina.com/authors/momijiina.png)](https://github.com)

表示結果:

代替テキスト

コードブロック (Code Block)​

シンプルなコードブロック​

```
console.log('Hello, world!');
```

表示結果:

console.log('Hello, world!');

四重バッククォート (Nested Code Blocks)​

コードブロックの中で

````
console.log('ネスト');
````

のように書けます。
4重、5重にすれば多い方が優先されます。

表示結果:

コードブロックの中で
```
console.log('ネスト');
```
のように書けます。

言語指定付きコードブロック​

私は適当に入れてたりしますが文字のハイライトが変わったりするので分けるといい感じです。

```js
function greet(name) {
  return `Hello, ${name}!`;
}
```

表示結果:

function greet(name) {
  return `Hello, ${name}!`;
}

インラインコード (Inline Code)​

これは `inline code` の例です。

表示結果:

これは inline code の例です。

テーブル (Table)​

| 見出し1 | 見出し2 |
| ------- | ------- |
| 内容A   | 内容B   |
| 内容C   | 内容D   |

表示結果:

見出し1見出し2
内容A内容B
内容C内容D

引用 (Blockquote)​

> これは引用です。
>> ネストした引用

表示結果:

これは引用です。

ネストした引用

区切り線 (Horizontal Rule)​

---

表示結果:

打ち消し線 (Strikethrough)​

~~打ち消し線~~

表示結果:

打ち消し線

チェックボックス (Task Lists)​

- [x] 完了したタスク
- [ ] 未完了のタスク

表示結果:

  • 完了したタスク
  • 未完了のタスク

脚注 (Footnotes)​

表示結果の一部はフッター付近に表示されます

脚注の例[^1]

[^1]: これは脚注です。

表示結果:

脚注の例1

HTMLタグの使用 (HTML Tags)​

<details>
  <summary>詳細を表示</summary>
  ここに詳細内容を書きます。
</details>

表示結果:

Details

詳細を表示 ここに詳細内容を書きます。

絵文字 (Emoji)​

:smile: :+1: :rocket:

表示結果:

😄 👍 🚀

数式 (Math Expressions)​

$E=mc^2$

$$
\int_0^1 x^2 dx
$$

表示結果:

$E=mc^2$

$$ \int_0^1 x^2 dx $$

Docusaurus特有の記法​

Admonition（注意書き）​

ビルドすると消えたりするけどなんだろ。

:::tip
これはヒントです。
:::

:::info
これは情報です。
:::

:::warning
これは警告です。
:::

:::danger
これは危険です。
:::

表示結果:

ヒント

これはヒントです。

備考

これは情報です。

警告

これは警告です。

危険

これは危険です。

Tabs（タブ表示）​

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
  <TabItem value="js" label="JavaScript">

  ```js
  console.log('JavaScript');
  ```

  </TabItem>
  <TabItem value="py" label="Python">

  ```python
  print('Python')
  ```

  </TabItem>
</Tabs>

表示結果:

console.log('JavaScript');

details（折りたたみ）​

<details>
  <summary>クリックで展開</summary>
  折りたたみ内容
</details>

表示結果:

Details

クリックで展開 折りたたみ内容

Footnotes​

  1. これは脚注です。 ↩